<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <a-spin :spinning="spinning">
      <a-card style="text-align:center; margin:24px; border:none;">
        <a-row :gutter="[16]">
          <a-col :span="5" class="assent">
            <div class="assent_mes">应收总金额</div>
            <div
              class="assent_shu"
            >{{statistics.currencyType === 'CNY' ? '¥' : '$'}} {{statistics.totalAmount}}</div>
          </a-col>
          <a-col :span="5" class="assent">
            <div class="assent_mes">已收总金额</div>
            <div
              class="assent_shu"
            >{{statistics.currencyType === 'CNY' ? '¥' : '$'}} {{statistics.alreadyAmount}}</div>
          </a-col>
          <a-col :span="5" class="assent">
            <div class="assent_mes">已放箱总金额</div>
            <div
              class="assent_shu"
            >{{statistics.currencyType === 'CNY' ? '¥' : '$'}} {{statistics.releasedAmount}}</div>
          </a-col>
          <a-col :span="5" class="assent">
            <div class="assent_mes">总箱量</div>
            <div
              class="assent_shu"
            >{{(statistics.unreleasedQuantity+statistics.releasedQuantity).toFixed(0)}}</div>
          </a-col>
          <a-col :span="4">
            <div class="assent_mes">已放箱量</div>
            <div class="assent_shu">{{statistics.releasedQuantity}}</div>
          </a-col>
        </a-row>
      </a-card>
      <a-row class="orderItem ordertem_de" v-if="listData.length > 0">
        <a-col :span="24">
          <div v-for="(v, index) in listData" :key="index" class="orderList">
            <a-card size="small">
              <template slot="title">
                <a-descriptions :column="5" class="titleCard" style="padding-left:24px;">
                  <a-descriptions-item label="公司编号">{{v.shipOrderCode}}</a-descriptions-item>
                  <a-descriptions-item label="运单号">
                    <a-tooltip placement="top" style="cursor:pointer">
                      <template slot="title">
                        <span>{{v.seagoingShipOrderCode}}</span>
                      </template>
                      {{v.seagoingShipOrderCode}}
                    </a-tooltip>
                  </a-descriptions-item>
                  <a-descriptions-item label="驳船船名航次">
                    <a-tooltip placement="top" style="cursor:pointer">
                      <template slot="title">
                        <span>{{v.shipName}}/{{v.voyageNumber}}</span>
                      </template>
                      {{v.shipName}}/{{v.voyageNumber}}
                    </a-tooltip>
                  </a-descriptions-item>
                  <a-descriptions-item label="创建日期">{{v.createTime}}</a-descriptions-item>
                  <a-descriptions-item label="所属销售">{{v.seller}}</a-descriptions-item>
                </a-descriptions>
              </template>
              <a-descriptions :column="4" size="small" class="order_detl_22">
                <a-descriptions-item label="客户名称">
                  <a-tooltip placement="top" style="cursor:pointer">
                    <template slot="title">
                      <span>{{v.custName}}</span>
                    </template>
                    {{v.custName}}
                  </a-tooltip>
                </a-descriptions-item>
                <a-descriptions-item label="运输条款">{{v.transportTerms}}</a-descriptions-item>
                <a-descriptions-item label="箱型箱量">{{v.containerType}} * 1</a-descriptions-item>
                <a-descriptions-item label="起运/目的港">{{v.startPortName}} — {{v.endPortName}}</a-descriptions-item>
                <a-descriptions-item label="订单类型">
                  <template>
                    <span v-if="v.orderType === 'DOMESTIC_TRADE_EXPORTS'">内贸出口</span>
                    <span v-else-if="v.orderType === 'DOMESTIC_TRADE_IMPORTS'">内贸进口</span>
                    <span v-else-if="v.orderType === 'FOREIGN_TRADE_EXPORTS'">外贸出口</span>
                    <span v-else-if="v.orderType === 'FOREIGN_TRADE_IMPORTS'">外贸进口</span>
                    <span v-else-if="v.orderType === 'UNITED_TRANSPORT_EXPORTS'">联运出口</span>
                    <span v-else-if="v.orderType === 'UNITED_TRANSPORT_IMPORTS'">联运进口</span>
                  </template>
                </a-descriptions-item>
                <a-descriptions-item label="箱号">{{v.containerNo}}</a-descriptions-item>
                <a-descriptions-item label="货名">{{v.goodsName}}</a-descriptions-item>
                <a-descriptions-item label="装货时间">{{v.loadingTime}}</a-descriptions-item>
              </a-descriptions>
            </a-card>
            <div class="pack_padd">
              <a-card size="small" style="border-top:none" class="order_czuo">
                <div class="pack_czuo">
                  <span>
                    放箱所需金额：¥
                    <span style="color:orange;font-size:20px">{{v.needAmount.toFixed(2)}}</span>
                  </span>
                  <template>
                    <a-button
                      v-if="v.releaseStatus === 1"
                      type="primary"
                      ghost
                      @click.stop="putContainer(v)"
                      style="float:right"
                    >放 箱</a-button>
                    <span v-else-if="v.releaseStatus === 2">可放货</span>
                  </template>
                </div>
              </a-card>
            </div>
          </div>
          <p class="orderPagination">
            <a-pagination
              show-size-changer
              :current="pagination.current"
              :total="pagination.total"
              :showTotal="pagination.showTotal"
              @showSizeChange="pagination.onShowSizeChange"
              @change="pagination.onChange"
            />
          </p>
        </a-col>
      </a-row>
      <a-empty v-else />
    </a-spin>
  </div>
</template>
<script>
import { getReleaseContainerDetail, releaseContainer } from '@/api/orderCenter'
export default {
  props: ['id'],
  data () {
    return {
      basePath: '/orderCenter',
      routes: [
        {
          path: '/packManage',
          breadcrumbName: '放箱管理'
        },
        {
          path: '',
          breadcrumbName: '勾选放货'
        }
      ],
      spinning: false,
      pageNum: 1,
      pageSize: 10,
      listData: [],
      statistics: {},
      pagination: {},
      btnControl: {}
    }
  },
  methods: {
    containerListRequest (e) {
      this.spinning = true
      getReleaseContainerDetail(e)
        .then(res => {
          let rsp = res.data
          this.pagination = this.getPagination(rsp.releaseContainerList)
          this.listData = rsp.releaseContainerList.list
          let statisticsData = rsp.releaseContainerStatistics
          if (statisticsData.totalAmount || statisticsData.totalAmount === 0) statisticsData.totalAmount = statisticsData.totalAmount.toFixed(2)
          if (statisticsData.alreadyAmount || statisticsData.alreadyAmount === 0) statisticsData.alreadyAmount = statisticsData.alreadyAmount.toFixed(2)
          if (statisticsData.releasedAmount || statisticsData.releasedAmount === 0) statisticsData.releasedAmount = statisticsData.releasedAmount.toFixed(2)
          this.statistics = statisticsData
          // let { pageNum, pageSize, total, pages } = rsp.releaseContainerList
          // this.pagination = { pageNum, pageSize, total, pages }
          
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
        .catch(rs => {
          setTimeout(() => {
            this.spinning = false
          }, 300)
        })
    },
    releaseRequest (e) {
      releaseContainer(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('放箱成功！')
            this.handleSubmit()
          }
        })
        .catch(rs => {})
    },
    onShowSizeChange (current, size) {
      this.pageNum = current
      this.pageSize = size
      this.handleSubmit()
    },
    paginationOnChange (pageNum) {
      this.pageNum = pageNum
      this.handleSubmit()
    },
    handleSubmit () {
      this.containerListRequest({
        billId: this.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    putContainer (e) {
      if (!this.btnControl.edit) {
        this.$message.error('您无此权限！')
        return false
      }
      this.releaseRequest({
        billId: this.id,
        orderShipId: e.orderShipId
      })
    },
    getPagination (data) {
      const pages = data ? data.pages : 0
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: data ? data.total : 0,
        showTotal: total => `共${total}条记录 第${this.pageNum}/${pages}页`,
        onChange: pageNum => {
          this.pageNum = pageNum
          this.handleSubmit()
        },
        onShowSizeChange: (current, size) => {
          this.pageNum = current
          this.pageSize = size
          this.handleSubmit()
        }
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // // console.log(this.$root._bc)
    })
    this.pagination = this.getPagination()
    this.containerListRequest({
      billId: this.id,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>
